﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ajax无刷新评论Demo</title>
    <style type="text/css">
        #txtMessage
        {
            height: 123px;
            width: 489px;
        }
    </style>
    <script type="text/javascript" src="jquery-1.8.0.js"></script>
    <script type="text/javascript">
        $(function () {
            //加载全部评论
            $.post("bodyload.ashx", function (data, state) {
                if (state == "success") {
                    var msgArray = data.split("|");
                    for (var i = 0; i < msgArray.length; i++) {
                        if (msgArray[i].length == 0) {
                            return;
                        }
                        //获取每条评论格式: 用户名@评论
                        var msg = msgArray[i].split("@");
                        var res = "<tr><td style='color:Silver;text-align:right'>" + msg[0] + "说:</td><td align='left'>" + msg[1] + "</td><tr>";
                        $("#root").append(res);
                    }
                }
            });

            //发表评论
            $("#btnSumbit").click(function () {
                var userName = $("#txtUserName").val();
                var msg = $("#txtMessage").val();
                if (userName.trim().length == 0 || msg.trim().length == 0) {
                    alert("必须填写昵称、评论！");
                    return false;
                }

                $.post("updateComment.ashx", { "uName": userName, "msg": msg }, function (data, state) {
                    if (state == "success") {
                        var res = "<tr><td style='color:Silver;text-align:right'>" + userName + "说:</td><td align='left'>" + msg + "</td><tr>";
                        $("#root").append(res);
                    }
                });
            })


        })
    </script>
</head>
<body>
    <div>
        <table id="root">
        </table>
        <br />
        <table border="0" cellpadding="2" cellspacing="2">
            <tr>
                <td align="right">
                    昵称:
                </td>
                <td align="left">
                    <input type="text" id="txtUserName" name="txtUserName" value="" maxlength="6" />
                </td>
            </tr>
            <tr>
                <td align="right">
                    信息：
                </td>
                <td align="left">
                    <textarea id="txtMessage" name="message" cols="100" rows="40"></textarea>
                </td>
            </tr>
            <tr>
                <td align="right">
                </td>
                <td align="center">
                    <input type="button" name="btnSumbit" value="提交" id="btnSumbit" />
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
